<template>
  <div class="videoBox">
    <div class="videoContent">
      <!--<h1>videoSrc:{{videoSrc}}</h1>-->
      <!--<videoPlayer class="vjs-custom-skin videoPlayer" :options="playerOptions"></videoPlayer>-->
      <div id="video" :style="styleObj"></div>
    </div>
    <div class="videoMark" v-if="this.videoSrc === null">直播路径似乎出错了</div>
  </div>
</template>

<script type="text/ecmascript-6">
  // import 'video.js/dist/video-js.css'
  // import {videoPlayer} from 'vue-video-player'
  // import 'videojs-flash'
  import '../../../static/ckplayer/ckplayer/ckplayer'

  export default {
    // components: {
    //   videoPlayer
    // },
    name: 'Video',
    props: {
      videoSrc: String,
      width: String,
      height: String,
      poster: String,
      videoID: Number
    },
    data() {
      return {
        styleObj: {
          width: this.width + 'px',
          height: this.height + 'px'
        },
        videoPlayer: '',
        totalTime: ''
      }
    },
    methods: {
      /* eslint-disable */
      play() {
        // 挂载完成后进行
        let videoId = this.videoID
        let cookieTime = this.get('time_' + videoId)
        if (!cookieTime || cookieTime === undefined) { //如果没有记录值，则设置时间0开始播放
          cookieTime = 0
        }
        // if (cookieTime > 0) {
        //   alert('本视频记录的上次观看时间(秒)为：' + cookieTime)
        // }
        // console.log('cookie', cookieTime)

        let videoObject = {
          container: '#video', // 容器的ID或className
          variable: 'player', // 播放函数名称
          loop: false, // 播放结束是否循环播放
          autoplay: false, // 是否自动播放
          loaded: 'loadHandler',
          duration: '',
          // poster: '/static/ckplayer/material/poster.jpg', //封面图片
          video: this.videoSrc
          // video: 'rtmp://live.hkstv.hk.lxdns.com/live/hks'
        }
        if (cookieTime > 0) { //如果记录时间大于0，则设置视频播放后跳转至上次记录时间
          videoObject['seek'] = cookieTime
        }
        // 定义一个对象
        let player = new ckplayer(videoObject)
        this.videoPlayer = player

        window.loadHandler = () => {
          player.addListener('time', this.timeHandler) //监听播放时间
          player.addListener('loadedmetadata', this.loadedMetaDataHandler); //监听元数据
          player.addListener('ended', this.endedHandler); //监听播放结束
        }

        // console.log('player', player)
        // window.videoObject = videoObject
      },
      endedHandler() {
        // this.$emit('saveHistory')
      },
      loadedMetaDataHandler() {
        let metaData = this.videoPlayer.getMetaDate();
        this.totalTime = metaData['duration']
      },
      timeHandler(t) {
        // console.log(t)
        this.set('time_' + this.videoID, t) //当前视频播放时间写入cookie

      },
      set(name, value) {
        let Days = 30
        let exp = new Date()
        exp.setTime(exp.getTime() + Days * 24 * 60 * 60 * 1000)
        document.cookie = name + '=' + escape(value) + ';expires=' + exp.toGMTString()
        // console.log('cookie', document.cookie)
      },
      get(name) {
        var arr, reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)')
        if (arr = document.cookie.match(reg)) {
          return unescape(arr[2])
        } else {
          return null
        }
      },
      del(name) {
        var exp = new Date()
        exp.setTime(exp.getTime() - 1)
        var cval = getCookie(name)
        if (cval != null) {
          document.cookie = name + '=' + cval + ';expires=' + exp.toGMTString()
        }
      }

    },
    mounted() {
      this.$nextTick(() => {
        this.play()
      })
      console.log('组件中的URL', this.videoSrc)
      // var player = new ckplayer(videoObject)
      // var metaData = player.getMetaDate()
      // console.log('视频总时间', metaData['duration'])
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .videoBox
    position relative

  .videoMark
    background-color: #fff;
    position: absolute;
    top: 0;
    left: 0;
</style>
